<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Website</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <!-- JavaScript 代码 -->
    <script src="{{ url_for('static', filename='search.js') }}" defer></script>
    <script src="{{ url_for('static', filename='shouye.js') }}" defer></script>
    <script src="{{ url_for('static', filename='research.js') }}" defer></script>
</head>
<body>
    <div class="page-container">
        <!-- 导航栏 -->
        <header class="navbar">
            <div class="container">
                <div class="logo">
                    <a href="#">Music Website</a>
                </div>
                <nav>
                    <ul>
                        <li><a href="{{ url_for('index') }}">首页</a></li>
                        <li><a href="#">发现</a></li>
                        <li><a href="{{ url_for('singer_page') }}">歌手</a></li>
                        <li><a href="#">排行榜</a></li>
                        <li><a href="#">我的音乐</a></li>
                    </ul>
                </nav>
                <div class="search-bar">
                    <input type="text" id="searchInput" placeholder="搜索音乐、歌手">
                    <button id="searchButton">搜索</button>
                </div>
            </div>
        </header>

        <!-- 主要内容 -->
        <main class="main-content">
            <div class="container">
                <!-- 推荐部分 -->
                <section class="recommend">
                    <h2>推荐歌单</h2>
                    <div class="recommend-categories">
                        <span class="category active" data-id="0">为你推荐</span>
                        <span class="category" data-id="3317">官方歌单</span>
                        <span class="category" data-id="59">经典</span>
                        <span class="category" data-id="71">情歌</span>
                        <span class="category" data-id="3056">网络歌曲</span>
                        <span class="category" data-id="64">KTV热歌</span>
                    </div>
                    <div class="recommend-list-container">
                        <button class="nav-btn" id="prevBtn">&lt;</button>
                        <div class="recommend-list" id="recommendList">
                            <!-- 推荐歌单项 -->
                        </div>
                        <button class="nav-btn" id="nextBtn">&gt;</button>
                    </div>
                </section>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="footer">
            <div class="container">
                <p>&copy; 2024 Music Website. All rights reserved.</p>
            </div>
        </footer>
    </div>
</body>
</html>
